import { genChartByAiUsingPOST } from '@/services/ant-design-pro/chartController';
// @ts-ignore
import { UploadOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import {
  Button,
  Col,
  Card,
  Form,
  Input,
  message,
  Row,
  Select,
  Space,
  Upload,
  Spin,
} from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import React, { useState } from 'react';


const AddChart: React.FC = () => {

  const [chart, setChart] = useState<API.BiResponse>();
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [option, setOption] = useState<any>();
  const sampleGraph = {
    "title": {
      "text": "网站用户增长趋势",
      "subtext": "单位：人",
      "x": "center"
    },
    "xAxis": {
      "type": "category",
      "data": ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    "yAxis": {
      "type": "value"
    },
    "series": [{
      "data": [100, 300, 500, 700, 900, 1100],
      "type": "bar"
    }]
  }
  

  const onFinish = async (values: any) => {
    // 避免重复提交
    if(submitting){
      return;
    }
    setSubmitting(true)
    console.log('用户表单内容: ', values);
    const params = {
      ...values,
      file: undefined
    }
    try {
      const res = await genChartByAiUsingPOST(params, {}, values.file.file.originFileObj)
      if(res.code === 0){
        setTimeout(()=> {
          message.success('分析成功', 2);
        }); 
        const chartOption = JSON.parse(res.data?.genChart ?? '')
        if(!chartOption){
          throw new Error('图表代码解析失败')
        }else{
          setChart(res?.data)
          setOption(chartOption)
          console.log(option)
        }
      }else{
        throw new Error('请重新生成')
      }
    } catch (e: any) {
      message.error("失败", e.message)
    }
    setSubmitting(false)
  };
  
  
  return (
    <div className="add-chart">
      {/* 
        变成一行两列 
        gutter: 列与列之间的间隔
        span={12}:取值范围为 0 到 24。
      */}
      <Row gutter={24}>
        <Col span={12}>
          <Card title="智能分析">
            <Form
            name="addChart"
            labelAlign='left'
            labelCol={{span: 3}}
            wrapperCol={{span: 16}}
            onFinish={onFinish}
            initialValues={{}}
          >

            <Form.Item name="goal" label="分析目标" rules={[{ required: true, message: '不能为空' }]}>
              <TextArea placeholder='请输入你的分析需求.如分析网站的用户增长情况'/>
            </Form.Item>

            <Form.Item name="name" label="图表名称" rules={[{ required: true, message: '不能为空' }]}>
              <Input placeholder='请输入图表名称'/>
            </Form.Item>

            <Form.Item
              name="chartType"
              label="图标类型"
              hasFeedback
            >
              <Select
                options={[
                  { value: '柱状图', label: '柱状图' },
                  { value: '折线图', label: '折线图' },
                  { value: '饼图', label: '饼图' },
                  { value: '堆叠图', label: '堆叠图' },
                  { value: '雷达图', label: '雷达图' },
                ]}
              />
            </Form.Item>

            <Form.Item
              name="file"
              label="原始数据"
            >
              <Upload name="file" action="/upload.do" listType="picture" maxCount={1}>
                <Button icon={<UploadOutlined />}>上传 CSV 文件</Button>
              </Upload>
            </Form.Item>

            <Form.Item wrapperCol={{ span: 12, offset: 3 }}>
              <Space>
                <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                  智能分析
                </Button>
                <Button htmlType="reset">重置</Button>
              </Space>
            </Form.Item>
            </Form>
          </Card>
        </Col>

        <Col span={12}>
          <Card title="生成图表">
            {
              option ? 
                <ReactECharts option={option} /> : <ReactECharts option={sampleGraph} />
            }
            { <Spin spinning={submitting} /> }
          </Card>
          <Card title="分析结论">
            {chart?.genContext ?? <h1>这是一个示例！！！</h1>}
            { <Spin spinning={submitting} /> }
          </Card>
        </Col>
      </Row>
      
    </div>
  );
};
export default AddChart;
